<template>
	<view class="container">
		<!-- 自定义导航栏 - 增强磨砂玻璃效果 -->
		<view class="nav-bar">
			<view class="nav-btn" @click="goBack" @touchstart="btnScale(0.95, $event)" @touchend="btnScale(1, $event)">
				<text class="icon">←</text>
			</view>
			<text class="nav-title">导入课程</text>
			<view class="nav-placeholder"></view> <!-- 保持左右对称 -->
		</view>

		<!-- 主内容区域 -->
		<view class="content">
			<!-- 导入卡片 - 增强立体感和交互 -->
			<view class="import-card" :class="{'card-hover': isCardHover}" @touchstart="isCardHover = true"
				@touchend="isCardHover = false">
				<image class="card-bg" src="/static/import-bg.png" mode="aspectFill"></image>

				<view class="upload-area" @click="chooseFile">
					<image class="upload-icon" src="/static/upload-icon.png" mode="aspectFit"></image>
					<text class="upload-text">点击或拖拽Excel文件到此处</text>
					<text class="upload-hint">支持.xlsx, .xls格式</text>
				</view>

				<view v-if="fileName" class="file-info">
					<text class="file-icon">📄</text>
					<text class="file-name">{{ fileName }}</text>
					<text class="file-clear" @click.stop="clearFile">×</text>
				</view>

				<button class="upload-btn" :class="{'btn-active': fileName, 'btn-disabled': !fileName}"
					@click="uploadFile" @touchstart="btnScale(0.95, $event)" @touchend="btnScale(1, $event)">
					{{ uploadProgress > 0 ? `上传中 ${uploadProgress}%` : '开始导入' }}
					<view class="progress-bar" :style="{width: uploadProgress + '%'}"></view>
				</button>
			</view>

			<!-- 使用指引 -->
			<view class="guide-card">
				<view class="guide-header">
					<text class="guide-title">使用指引</text>
					<text class="guide-more">查看模板 ></text>
				</view>
				<view class="guide-steps">
					<view class="step-item">
						<text class="step-num">1</text>
						<text class="step-text">下载课程模板表格</text>
					</view>
					<view class="step-item">
						<text class="step-num">2</text>
						<text class="step-text">按格式填写课程信息</text>
					</view>
					<view class="step-item">
						<text class="step-num">3</text>
						<text class="step-text">上传填写好的表格文件</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作反馈弹窗 -->
		<uni-popup ref="popup" type="message">
			<uni-popup-message :type="popupType" :message="popupMessage"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		applyTheme,
		getCurrentTheme
	} from '@/utils/theme.js'; // 注意替换实际的 theme.js 路径

	export default {
		data() {
			return {
				file: null,
				fileName: '',
				uploadProgress: 0,
				isCardHover: false,
				popupType: '',
				popupMessage: '',
				baseUrl: globalThis.BASE_API
			};
		},
		onMounted() {
			// 初始化主题
			this.initTheme();
			// 监听主题变化事件
			uni.$on('themeChange', (newVars) => {
				this.applyThemeVars(newVars);
			});
		},
		onUnmounted() {
			// 移除事件监听，避免内存泄漏
			uni.$off('themeChange');
		},
		methods: {
			initTheme() {
				const savedTheme = getCurrentTheme();
				const initialTheme = themeOptions.find(t => t.value === savedTheme) || themeOptions[0];
				if (initialTheme) {
					this.applyThemeVars(initialTheme.vars);
				}
			},
			applyThemeVars(vars) {
				const doc = document.documentElement;
				Object.entries(vars).forEach(([key, value]) => {
					doc.style.setProperty(key, value);
				});
			},

			goBack() {
				uni.switchTab({
					url: '/pages/index/table'
				})
			},
			// 按钮按压动画
			btnScale(scale, e) {

				if (e.currentTarget) {
					e.currentTarget.style.transform = `scale(${scale})`;
				}
			},
			chooseFile() {
				uni.chooseFile({
					count: 1,
					type: 'file',
					extension: ['.xlsx', '.xls'],
					success: (res) => {
						this.file = res.tempFiles[0];
						this.fileName = res.tempFiles[0].name;
						this.showPopup('success', '文件选择成功');
					},
					fail: (err) => {
						this.showPopup('error', '选择文件失败');
						console.error('选择文件失败:', err);
					}
				});
			},
			clearFile() {
				this.file = null;
				this.fileName = '';
				this.uploadProgress = 0;
			},
			async uploadFile() {
				if (!this.file) {
					this.showPopup('warning', '请先选择文件');
					return;
				}

				try {
					this.uploadProgress = 10; // 开始上传显示进度

					const res = await uni.uploadFile({
						url: `${this.baseUrl}/course/import`,
						filePath: this.file.path,
						name: 'file',
						formData: {
							userId: uni.getStorageSync('userID') || 'defaultUser'
						},
						// 上传进度回调
						progress: (res) => {
							this.uploadProgress = res.progress;
						}
					});

					const responseData = JSON.parse(res.data);
					if (responseData.code === 200) {
						this.showPopup('success', '课程导入成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						this.showPopup('error', responseData.message || '导入课程失败');
					}
				} catch (err) {
					this.showPopup('error', '上传文件失败，请重试');
					console.error('上传文件失败:', err);
				} finally {
					this.uploadProgress = 0;
				}
			},
			showPopup(type, message) {
				this.popupType = type;
				this.popupMessage = message;
				this.$refs.popup.open();
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 基础样式 */
	.container {
		padding: 0;
		background: linear-gradient(135deg, var(--bg-color) 0%, #e4e8ed 100%);
		min-height: 100vh;
	}

	/* 导航栏 - 增强磨砂效果 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		background: var(--primary-color); 
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 10;

		.nav-btn {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			transition: all 0.2s ease;

			.icon {
				font-size: 24px;
				font-weight: bold;
				color: var(--sub-text-color);
			}

			&:active {
				background: rgba(0, 0, 0, 0.05);
			}
		}

		.nav-title {
			font-size: 18px;
			font-weight: 600;
			color: #ffffff;

		}

		.nav-placeholder {
			width: 40px;
		}
	}

	/* 主内容区域 */
	.content {
		padding: 20px;
	}

	/* 导入卡片 - 增强立体感 */
	.import-card {
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
		padding: 0;
		overflow: hidden;
		position: relative;
		margin-bottom: 20px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;

		&.card-hover {
			transform: translateY(-2px);
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
		}

		.card-bg {
			width: 100%;
			height: 120px;
			opacity: 0.1;
		}

		.upload-area {
			padding: 30px 20px;
			text-align: center;
			border: 2px dashed #e0e0e0;
			border-radius: 12px;
			margin: 20px;
			transition: all 0.3s ease;

			&:active {
				background: var(--primary-color);
				border-color: var(--border-color); 
			}

			.upload-icon {
				width: 60px;
				height: 60px;
				margin-bottom: 10px;
			}

			.upload-text {
				display: block;
				font-size: 16px;
				color: #333;
				font-weight: 500;
				margin-bottom: 5px;
			}

			.upload-hint {
				font-size: 12px;
				color: #999;
			}
		}

		.file-info {
			display: flex;
			align-items: center;
			padding: 15px 20px;
			background: #f8f9fa;
			border-radius: 10px;
			margin: 0 20px 20px;
			position: relative;

			.file-icon {
				font-size: 20px;
				margin-right: 10px;
			}

			.file-name {
				flex: 1;
				font-size: 14px;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.file-clear {
				font-size: 20px;
				color: #999;
				padding: 0 5px;
				margin-left: 10px;

				&:active {
					color: #a34943;
				}
			}
		}

		.upload-btn {
			width: calc(100% - 40px);
			margin: 0 20px 20px;
			height: 48px;
			line-height: 48px;
			background: var(--primary-color);
			color: #fff;
			border: none;
			border-radius: 12px;
			font-size: 16px;
			font-weight: 500;
			position: relative;
			overflow: hidden;
			transition: all 0.3s ease;

			&.btn-active {
				background:var(--primary-color-dark);
				box-shadow: 0 4px 15px var(--card-shadow);
			}

			&.btn-disabled {
				background: #c0c4cc;
				box-shadow: none;
			}

			.progress-bar {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 3px;
				background: rgba(255, 255, 255, 0.5);
				transition: width 0.3s ease;
			}
		}
	}

	/* 使用指引卡片 */
	.guide-card {
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
		padding: 20px;

		.guide-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.guide-title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}

			.guide-more {
				font-size: 12px;
				color: var(--text-color);
			}
		}

		.guide-steps {
			.step-item {
				display: flex;
				align-items: center;
				padding: 10px 0;

				.step-num {
					width: 20px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					background: var(--primary-color);
					color: #fff;
					border-radius: 50%;
					font-size: 12px;
					margin-right: 10px;
				}

				.step-text {
					font-size: 14px;
					color: #666;
				}
			}
		}
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.import-card,
	.guide-card {
		animation: fadeIn 0.5s ease forwards;
	}

	.guide-card {
		animation-delay: 0.1s;
	}
</style>